<template>
  <div>
    <div class="title font14 ma30-15">
      <p>修改密码</p>
    </div>
    <div class="bor7 pa15">

        <el-form
          :model="ruleForm"
          :rules="ruleFormRules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
      <el-form-item label="原密码" prop="oldpassword" class="w50">
        <el-input type="password" v-model.number="ruleForm.oldpassword"></el-input>
      </el-form-item>
        <el-form-item label="新密码" prop="newpassword" class="w50">
          <el-input type="password" v-model="ruleForm.newpassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" class="w50">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="submit"
            class="baocun"
            @click="handleSubmit">
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: [],
      ruleFormRules: {
        oldpassword: [{ required: true, message: "原密码必填", trigger: "blur" }],
        newpassword: [{ required: true, message: "新密码必填", trigger: "blur" }],
        checkPass: [{ required: true, message: "确认密码必填", trigger: "blur" }],
      },
    };
  },
  methods: {
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          that.info = response.data.data;
          ////console.log(that.info);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //提交
    handleSubmit() {
      this.$nextTick(() => {
        //console.log(123);
      this.$refs.ruleForm.validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          //console.log(12345);
          //console.log(this.ruleForm);
          if(this.ruleForm.checkPass != this.ruleForm.newpassword){
            this.$message.error('两次密码不一样');
            return false;
          }

          var that = this;

          //验证原密码
          var jsons_t = {
            account: this.info.mobile,
            password: this.ruleForm.oldpassword,
          };
          //在需要的事件中直接使用
          this.$axios
            .post(this.$api + "/api/user/login", jsons_t)
            .then((res) => {
              //console.log(res.data);
              if (res.data.code != 1) {
                that.$message.error(res.data.msg);
                return false;
              }
            })
            .catch((Error) => {
              //console.log(Error);
            });

          var url = this.$api + "/api/user/changepwd";
          var jsons = {
            oldpassword: this.ruleForm.oldpassword,
            newpassword: this.ruleForm.newpassword
          };

          this.$axios
            .post(url, jsons)
            .then((res) => {
              //console.log(res.data);
              if (res.data.code == 1) {
                that.$message({
                  message: res.data.msg,
                  type: "success",
                });
                // 缓存token
                window.localStorage.setItem("token", "");
                window.localStorage.setItem("userid", "");

                // 跳转主页面
                that.$router.push("/");
              } else {
                that.$message.error(res.data.msg);
              }
            })
            .catch((Error) => {
              //console.log(Error);
              that.$message.error(Error);
            });
        }
      });
      })
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style scope>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
@media (max-width:767px) {
  .w50 {
    width: 100%;
  }
}
</style>
